import React, { useState } from 'react';
import { Content, Card, Checkbox } from 'react-fule-ui';
import './index.scss';
const list = [
  {
    checked: true,
    value: '1',
    content: '1',
    disabled: true,
  },
  {
    checked: false,
    value: '2',
    content: '2',
    disabled: true,
  },
  {
    checked: true,
    value: '3',
    content: '3',
    disabled: false,
  },
  {
    checked: false,
    value: '4',
    content: '4',
    disabled: false,
  },
  {
    checked: false,
    value: '5',
    content: '5',
    disabled: false,
  },
];
export default function FuleCheckbox() {
  const [checkedValue, setCheckedValue] = useState([]);
  const [checkedValue1, setCheckedValue1] = useState([]);
  const funValue = (data) => {
    setCheckedValue(data);
  };
  const funValue1 = (data) => {
    setCheckedValue1(data);
  };
  console.log();
  return (
    <Content>
      <Content.Header>多选 checkbox</Content.Header>
      <Content.Body>
        <Card>
          <Card.Header>基础用法</Card.Header>
          <Card.Body>
            <Checkbox onChange={(data) => funValue(data)}>
              <Checkbox.Item>我同意协议</Checkbox.Item>
            </Checkbox>
            <div className="dome-checkbox">
              你选择了：{checkedValue.checked && checkedValue.value}
            </div>
          </Card.Body>
        </Card>
        <Card>
          <Card.Header>多个</Card.Header>
          <Card.Body>
            <Checkbox onChange={(data) => funValue1(data)} arr={list}>
              {list.map((item, index) => (
                <Checkbox.Item
                  checked={item.checked}
                  value={item.content}
                  disabled={item.disabled}
                  key={index}
                >
                  {item.content}
                </Checkbox.Item>
              ))}
            </Checkbox>
            <div className="dome-checkbox">
              你选择了：{checkedValue1.map((item) => item.value)}
            </div>
          </Card.Body>
        </Card>
      </Content.Body>
    </Content>
  );
}
